Intorduction to HTML
HTML (HyperText Markup Language) is the standard language used to create and design webpages. Think of HTML as the skeleton of a webpage, providing the basic structure and layout. Here’s a simple breakdown:
What is HTML?
- HyperText: Refers to the way HTML documents are interconnected. Text within an HTML document can link to other documents or resources on the web.
- Markup Language: A system for annotating a document in a way that is syntactically distinguishable from the text. HTML uses "tags" to mark elements within a document.
Basic Concepts
-
Tags: HTML uses tags to create elements. Tags are enclosed in angle brackets, like this:
<tagname>
. Most tags come in pairs: an opening tag<p>
and a closing tag</p>
. -
Elements: An element consists of an opening tag, content, and a closing tag. For example:
<p>This is a paragraph.</p>
Here,
<p>
is the opening tag,This is a paragraph.
is the content, and</p>
is the closing tag. -
Attributes: Tags can have attributes that provide additional information about an element. Attributes are placed inside the opening tag. For example:
<a href="https://example.com">Visit Example</a>
Here,
href
is an attribute of the<a>
tag, which specifies the URL of the link.
Basic Structure of an HTML Document
An HTML document typically starts with a <!DOCTYPE html>
declaration, followed by an <html>
element that contains two main sections: the <head>
and the <body>
.
-
DOCTYPE Declaration: Informs the web browser about the version of HTML.
<!DOCTYPE html>
-
HTML Element: The root element of an HTML page.
<html>
<!-- Head and Body go here -->
</html> -
Head Section: Contains meta-information about the document, like its title and linked resources (e.g., stylesheets).
<head>
<title>My First HTML Page</title>
</head> -
Body Section: Contains the actual content of the page, like text, images, links, etc.
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
</body>
Putting It All Together
Here's a simple HTML document:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first webpage.</p>
</body>
</html>
Output:
Summary
HTML is the foundational language for creating webpages, using tags to structure content. By learning HTML, you can build your own websites and understand how the web works from the ground up.